<template>
  <div class="app-container schemeAdd">
    <el-form :model="schemeForm" :rules="rules"  size="mini" ref="schemeForm" label-width="auto" class="scheme-addForm">
      <FixedBar>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="onCancel">取消</el-button>
      </FixedBar>
      <el-card class="mt10 box-card">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>
        <el-row :gutter="10">
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="方案名称" prop="programmeName">
              <el-input v-model="schemeForm.programmeName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="业务量分档" prop="businessClassification">
              <el-input style="width: 100%" v-model="schemeForm.businessClassification" :min="0">
                <template slot="append">万件</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="班次" prop="timeShiftId">
              <el-select ref="selectValue1" v-model="schemeForm.timeShiftId" filterable placeholder="请选择"  >
                <el-option
                  v-for="item in timeShiftList"
                  :key="item.timeShiftId"
                  :label="item.timeShiftName"
                  :value="item.timeShiftId"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="汇总人数" prop="standardNumber">
              <el-input style="width: 100%" v-model="schemeForm.standardNumber" :min="0" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="标准人效" prop="standardEffect">
              <el-input style="width: 100%" v-model.number="schemeForm.standardEffect">
                <template slot="append">件</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="6">
            <el-form-item label="方案状态" prop="status">
              <el-radio v-model="schemeForm.status" :label="1">启用</el-radio>
              <el-radio v-model="schemeForm.status" :label="2">禁用</el-radio>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="mt10 box-card">
        <div slot="header" class="clearfix">
          <span>人员配置</span>
        </div>
        <el-table
          class="staffTable"
          :data="staffData"
          :span-method="objectSpanMethod"
          border
          :summary-method="getSummaries"
          style="width: 100%">
          <el-table-column
            prop="regionName"
            label="区域"
            width="180">
            <template slot-scope="scope">
              <span :class="{ textDisable : scope.row.regionDisable }">{{scope.row.regionName}}</span>
              <span class="linkBox">
                <el-link @click="handleStatus('region',scope.row)" v-if="scope.row.regionDisable" type="primary">启用</el-link>
                <el-link @click="handleStatus('region',scope.row)" v-else type="danger">禁用</el-link>
              </span>
<!--              <el-button @click="deleteRegion(scope.row)" style="margin-left: 5px" type="danger" icon="el-icon-close" size="mini" circle></el-button>-->
            </template>
          </el-table-column>
          <el-table-column
            prop="groupName"
            label="组别">
            <template slot-scope="scope">
              <span :class="{ textDisable : scope.row.groupDisable }">{{scope.row.groupName}}</span>
              <span class="linkBox">
                <el-link @click="handleStatus('group',scope.row)" v-if="scope.row.groupDisable" type="primary">启用</el-link>
                <el-link @click="handleStatus('group',scope.row)" v-else type="danger">禁用</el-link>
              </span>
            </template>
          </el-table-column>
<!--          <el-table-column-->
<!--            prop="groupNumber"-->
<!--            label="组别人数">-->
<!--            <template slot-scope="scope">-->
<!--              <el-input-number v-model="scope.row.groupNumber" @change="handleChange(scope.row)" style="width: 100%" :min="0"></el-input-number>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column
            prop="postName"
            label="岗位">
            <template slot-scope="scope">
              <span :class="{ textDisable : scope.row.postDisable }">{{scope.row.postName}}</span>
              <span class="linkBox">
                <el-link @click="handleStatus('post',scope.row)" v-if="scope.row.postDisable" type="primary">启用</el-link>
                <el-link @click="handleStatus('post',scope.row)" v-else type="danger">禁用</el-link>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            width="150px"
            prop="postNumber"
            label="计划人数">
            <template slot-scope="scope">
              <span v-if="scope.row.postDisable" class="textDisable">— —</span>
              <el-input-number v-else size="mini" controls-position="right" v-model="scope.row.postNumber" @change="handleChange(scope.row)" style="width: 100%" :min="0"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            prop="quota"
            label="汇总人数">
            <template slot-scope="scope">
              <span :class="{ textDisable : scope.row.regionDisable }">
                计划总人数：{{scope.row.quota ? scope.row.quota : 0}}
              </span>
            </template>
          </el-table-column>
        </el-table>
<!--        <div style="margin-top: 20px">-->
<!--          <el-button type="primary" icon="el-icon-plus" @click="handleAddArea">新增区域</el-button>-->
<!--        </div>-->

      </el-card>

      <el-card class="mt10 box-card">
        <div slot="header" class="clearfix">
          <span>设备配置</span>
        </div>
        <div class="device-wrap">
          <div class="device-head">
            <el-form :inline="true" size="mini" ref="deviceForm" :model="deviceForm" :rules="deviceRules"  class="device-form-inline">
              <el-form-item label="设备作业时段">
                <el-form-item prop="date1">
                  <el-select v-model="deviceForm.date1" placeholder="开始时间" style="width: 120px">
                    <el-option
                      v-for="(item,index) in 24"
                      :key="item"
                      :label="index"
                      :value="index">
                    </el-option>
                  </el-select>
                </el-form-item>

                <span> 至 </span>
                <el-form-item prop="date2">
                  <el-select v-model="deviceForm.date2" placeholder="结束时间" style="width: 120px">
                    <el-option
                      v-for="(item,index) in 24"
                      :key="item"
                      :label="index"
                      :value="index">
                    </el-option>
                  </el-select>
                </el-form-item>

                <span> 点 </span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onGenerateSubmit">生成</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div style="margin-top: 20px">
            <span class="itemStatus">启用</span>
            <span class="itemStatus red">停用</span>
          </div>

          <el-table
            v-if="deviceData.length"
            :data="deviceData"
            border
            style="width: 100%;margin-top: 20px">
            <el-table-column
              prop="equipmentName"
              label="作业时间"
              width="180">
            </el-table-column>
            <el-table-column
              v-for="item in deviceTime"
              :prop="`${item}`"
              :label="`${item}`">
              <template slot-scope="scope">
                <div class="status" :class="{green:scope.row[item] == 1,red:scope.row[item] == 0}"  @click="handleSelected(scope)"></div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </el-form>

    <!-- 添加区域对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="80px">
        <el-form-item label="区域" prop="area">
          <el-select v-model="addForm.area" placeholder="请选择区域">
            <el-option
              v-for="item in areaOptions"
              :key="item.regionName"
              :label="item.regionName"
              :value="item.regionName">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 修改设备状态对话框 -->
    <el-dialog :title="title" :visible.sync="statusOpen" width="500px" append-to-body>
      <el-form ref="statusForm" :model="statusForm" :rules="statusRules" label-width="80px">
        <el-form-item label="设备">
          <span style="padding: 10px">{{statusData.row.equipmentName}} {{statusData.column.property}}点 作业状态</span>
        </el-form-item>

        <el-form-item label="作业状态" prop="status">
          <el-select v-model="statusForm.status" placeholder="请选择状态">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="停用" :value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitStatusForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
  import {
    getEquipmentsAndDeps,
    addSchemeConfiguration,
    getTimShiftInfo,
    getSchemeDetail,
    updateSchemeConfiguration
  } from "@/api/job/scheme";
  import FixedBar from '@/components/FixedBar';

  export default {
    components:{
      FixedBar
    },
    data(){
      return {
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        //设备状态弹出层
        statusOpen: false,
        statusData: { row: {}, column: {}},
        areaOptions: [],
        deviceTime: [],
        deviceData: [],
        allAreaData: [],  //全部区域数据
        equipments: [],  //设备列表
        info: null,  //编辑回写
        staffData: [],
        timeShiftList :[],
        statusForm: {
          status: ''
        },
        deviceForm: {
          date1: '',
          date2: '',
        },
        schemeForm: {
          programmeName: '',
          businessClassification: '',
          standardNumber: '',
          standardEffect: null,
          status: 1
        },
        addForm: {
          area: '',
        },
        statusRules: {
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
        },
        deviceRules: {
          date1: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
          date2: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ],
        },
        addRules: {
          area: [
            { required: true, message: '请选择区域', trigger: 'change' }
          ],
        },
        rules: {
          programmeName: [
            { required: true, message: '请输入方案名称', trigger: 'blur' },
            { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          ],
          businessClassification: [
            { required: true, message: '请选择业务量分档', trigger: 'change' }
          ],
          standardNumber: [
            { required: true, message: '请输入汇总人数', trigger: 'blur' },
          ],
          standardEffect: [
            { required: true, message: '请输入标准人效', trigger: 'blur' },
            { type: 'number', message: '标准人效必须为数字值'}
          ],
          timeShiftId: [
            { required: true, message: '请输入班次' },
          ],
        }
      }
    },
    created(){
      const { id } = this.$route.query;
      if(id){
        this.getSchemeDetail(id)
      }
      //获取初始化配置
      this.getEquipmentsAndDeps();
      this.getTimShiftInfo();
    },
    computed: {
      areaNum(){  //获取区域数组
        return new Set(this.staffData.map(o => o.regionName));
      },
      groupNum(){  //获取组别数组
        return new Set(this.staffData.map(o => o.groupName));
      }
    },
    methods:{
      // 取消按钮
      cancel() {
        this.open = false;
        this.statusOpen = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          area: undefined,
        };
        this.resetForm("addForm");
        this.resetForm("statusForm");
      },
      //格式化设备数据
      convertDeviceData(data){
        const deviceData = []
        const deviceTime = [];
        const beginTime = data[0].beginTime;
        const endTime = data[0].endTime;
        this.deviceForm.date1=beginTime;
        this.deviceForm.date2=endTime;
        data.forEach((item,index) => {
          if(beginTime>endTime){
            //晚班
            for(let i = beginTime,j=0; i< 24; i++,j++){
              item[i] = item.tableData[j];
              //获取设备时间
              if(index === 0){
                deviceTime.push(i)
              }
            }
            for(let i = 0,j=0; i< endTime; i++,j++){
              item[i] = item.tableData[j];
              //获取设备时间
              if(index === 0){
                deviceTime.push(i)
              }
            }
          }else {
            for(let i = beginTime,j=0; i<= endTime; i++,j++){
              item[i] = item.tableData[j];
              //获取设备时间
              if(index === 0){
                deviceTime.push(i)
              }
            }
          }
          deviceData.push(item)
        });
        this.deviceTime = deviceTime;
        return deviceData;
      },
      //获取方案详情
      getSchemeDetail(id){
        getSchemeDetail(id).then(res => {
          //获取初始化配置
          // this.getEquipmentsAndDeps()
          // console.log(res)
          if(res.code === 200){
            const data = res.data || {};
            const info = data.schemeConfiguration;
            this.info = info;
            this.schemeForm = {
              programmeName: info.programmeName,
              standardNumber: info.standardNumber,
              standardEffect: info.standardEffect,
              status: info.status,
              businessClassification: info.businessClassification,
              timeShiftId: info.timeShiftId
            }
            this.staffData = data.deps;
            const deviceData = this.convertDeviceData(data.equipments)

            this.deviceData = deviceData;
          }
        })
      },
      //获取设备列表 人员配置列表
      getEquipmentsAndDeps() {
        this.loading = true;
        getEquipmentsAndDeps().then(response => {
          if(response.code === 200){
            const data = response.data;
            //判断是编辑状态
            if(!this.info){
              const staffData = data.deps;
              staffData.forEach(item=>{
                item.regionDisable = 0;
                item.groupDisable = 0;
                item.postDisable = 0;
              })
              this.staffData = staffData;
            }


            this.allAreaData = data.deps;
            this.equipments = data.equipments;
          }
          this.loading = false;
        });
      },
      //新增方案请求
      addSchemeConfiguration(params){
        this.loading = true;
        addSchemeConfiguration(params).then(response => {
          // console.log(response);
          if(response.code === 200){
            this.$router.replace({path:"/basic/plan/scheme"});
          }
          this.loading = false;
        }).catch(e=>{
          console.log(e)
        });
      },
      //新增方案请求
      updateSchemeConfiguration(params){
        this.loading = true;
        updateSchemeConfiguration(params).then(response => {
          // console.log(response);
          if(response.code === 200){
            this.$router.replace({path:"/basic/plan/scheme"});
          }
          this.loading = false;
        }).catch(e=>{
          console.log(e)
        });
      },
      handleSelected(e){
        // console.log(e);
        this.reset();
        this.statusOpen = true;
        this.title = "修改设备作业状态";
        this.statusData = e;
        this.statusForm.status = e.row[e.column.property]
      },
      //取消
      onCancel(){
        this.$router.replace({path:"/basic/plan/scheme"});
      },
      //保存
      onSubmit: function(){
        this.$refs["schemeForm"].validate(valid => {
          if (valid) {
            // console.log(valid,this.schemeForm);

            //定额合计
            const number = this.getQuotaSum();
            if(this.staffData.length === 0){
              this.msgError('请添加区域')
            }else if(number === 0){
              this.msgError('请配置组别人数')
            }else if(this.deviceData.length === 0){
              this.msgError('请生成设备工作时间')
            }else {
              const time = this.deviceTime;
              const equipmentsData = [];
              this.deviceData.forEach(item =>{
                const obj = {};
                obj.equipmentId = item.equipmentId;
                obj.equipmentName = item.equipmentName;
                obj.tableData = []
                time.forEach(tItem => {
                  obj.tableData.push(item[tItem])
                });
                equipmentsData.push(obj)
              })
              const equipments = {
                "beginTime": time[0],
                "endTime": time[time.length-1],
                "data": equipmentsData
              }
              const params = { ...this.schemeForm,equipments:equipments,deps:this.staffData};
              console.log(params);
              if(this.info){
                params.id = this.info.id;
                //保存请求
                this.updateSchemeConfiguration(params)
              }else {
                //保存请求
                this.addSchemeConfiguration(params)
              }


            }
          }
        })
      },
      /** 提交按钮 */
      submitAddForm: function() {
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            // console.log(valid,this.addForm);
            const name = this.addForm.area;
            //从全部区域添加区域
            const newData = this.allAreaData.filter(o => o.regionName === name);
            // console.log(newData);
            const oldData = this.staffData;
            const newOptions = this.areaOptions.filter(o => o.regionName !== name);
            this.areaOptions = newOptions;
            this.staffData = [...oldData,...newData];
            //定额合计
            const number = this.getQuotaSum()
            this.schemeForm.standardNumber = number
            this.open = false;
            this.reset();

          }
        });
      },
      submitStatusForm: function(){
        this.$refs["statusForm"].validate(valid => {
          if (valid) {
            // console.log(valid,this.statusForm);
            const { status } = this.statusForm;
            const { row, column, $index } = this.statusData;
            this.deviceData[$index][column.property] = status;
            this.statusOpen = false;
            this.reset();
          }
        });
      },
      onGenerateSubmit: function() {
        this.$refs["deviceForm"].validate(valid => {
          if (valid) {
            // console.log(valid,this.deviceForm);
            const { date1, date2 } = this.deviceForm;
            // if(date1>date2){
            //   this.msgError('开始时间大于结束时间');
            //   return false;
            // }
            //生成设备表格数据
            const device = this.equipments;
            const deviceData = [];
            const deviceTime = [];
            const timeObj = {};
            if(date1>date2){
              //晚班
              for (let i = date1; i < 24; i++){
                timeObj[i] = 1; //默认生成启用状态
                deviceTime.push(i)
              }
              for (let i = 0; i <= date2; i++){
                timeObj[i] = 1; //默认生成启用状态
                deviceTime.push(i)
              }
            }else {
              for (let i = date1; i <= date2; i++){
                timeObj[i] = 1; //默认生成启用状态
                deviceTime.push(i)
              }
            }

            device.forEach(item => {
              deviceData.push({...item,...timeObj})
            });
            // console.log(deviceData);
            this.deviceData = deviceData;
            this.deviceTime = deviceTime;

          }
        });
      },
      //启用禁用
      handleStatus(key,data){
        // console.log(key,data);
        const newData = [];
        this.staffData.forEach(item=>{
          const obj = {...item};
          if(obj[key+'Id'] === data[key+'Id']){
            const disable = data[key+'Disable'];
            obj[key+'Disable'] = disable ? 0 : 1;
            obj['postNumber'] = 0;
            //禁用组别下的所有岗位
            if(key === 'group'){
              obj['postDisable'] = disable ? 0 : 1;
              obj['postNumber'] = 0;
            }
            //禁用区域下的所有 岗位和组别
            if(key === 'region'){
              obj['postDisable'] = disable ? 0 : 1;
              obj['groupDisable'] = disable ? 0 : 1;
              obj['postNumber'] = 0;
            }
          }
          newData.push(obj)
        });
        //如果是岗位 启用禁用 组别
        if(key === 'post'){
          const groupData = this.getGroup(newData,data.groupId);
          let len = groupData.filter(o => o.postDisable === 1 ).length
          // console.log(groupData.length,len);
          if(len === groupData.length){
            newData.forEach(item=>{
              if(item.groupId === data.groupId){
                item['groupDisable'] = 1
              }
            })
          }else {
            newData.forEach(item=>{
              if(item.groupId === data.groupId){
                item['groupDisable'] = 0
              }
            })
          }
        }
        if(key === 'group'||key === 'post'){
          const regionData = this.getRegion(newData,data.regionId);
          let len = regionData.filter(o => o.groupDisable === 1 ).length;
          if(len === regionData.length){
            newData.forEach(item=>{
              if(item.regionId === data.regionId){
                item['regionDisable'] = 1
              }
            })
          }else {
            newData.forEach(item=>{
              if(item.regionId === data.regionId){
                item['regionDisable'] = 0
              }
            })
          }
        }
        this.staffData = newData;

        //重新结算组别人数
        this.handleChange(data)
      },
      // 区域删除
      deleteRegion(data){
        // console.log(data,this.staffData);
        //删除的区域 放到添加区域列表
        const options = this.areaOptions || [];
        this.areaOptions = [...options,data];
        const newData = this.staffData.filter(o => o.regionName !== data.regionName);
        // console.log(newData)
        this.staffData = newData;
        //定额合计
        const number = this.getQuotaSum()
        this.schemeForm.standardNumber = number

      },
      handleAddArea(){
        this.reset();
        this.open = true;
        this.title = "添加区域";

      },
      getGroup(data,id){  //根据组别名称获取组别数量
        return data.filter(o => o.groupId == id);
      },
      getRegion(data,id){  //根据组别名称获取组别数量
        return data.filter(o => o.regionId == id);
      },
      classGroup(name){  //根据组别名称获取组别数量
        return this.staffData.filter(o => o.groupName == name).length;
      },
      classArea(name){  //根据区域名称获取区域数量
        return this.staffData.filter(o => o.regionName == name).length;
      },
      classGroupLen(name){  //根据组别名称获取该区域第一个岗位的偏移位置
        const tmp = Array.from(this.groupNum);
        const index = tmp.indexOf(name);  //某岗位在全区域中的偏移位置
        let len = 0;
        for (let i = 0;i < index;i++){
          len += this.classGroup(tmp[i]);
        }
        return len;
      },
      classAreaLen(name){  //根据组别名称获取该区域第一个岗位的偏移位置
        const tmp = Array.from(this.areaNum);
        const index = tmp.indexOf(name);  //某岗位在全区域中的偏移位置
        let len = 0;
        for (let i = 0;i < index;i++){
          len += this.classArea(tmp[i]);
        }
        return len;
      },
      handleChange(data){
        // 组别人数变动
        //获取组别数量 定额
        let quota = 0;
        const tmp = this.staffData.filter(o => o.regionName == data.regionName);
        tmp.forEach(item=>{
          if(!item.postDisable && item.postNumber){
            quota += item.postNumber
          }

        })
        // console.log(tmp,quota)
        const len = this.classAreaLen(data.regionName);
        this.staffData[len].quota = quota;

        //定额合计
        const number = this.getQuotaSum()
        this.schemeForm.standardNumber = number
      },
      //定额合计
      getQuotaSum(){
        let number = 0;
        this.staffData.forEach(item => {
          if(item.quota){
            number += item.quota;
          }
        });
        return number
      },
      //获取汇总数据
      getSummaries(param) {
        const {columns, data} = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '汇总人数';
            return;
          }
          const needSum = ["postNumber","quota"];
          if(needSum.indexOf(column.property) === -1){
            //不需要计算汇总
            return false
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = 'N/A';
          }
        });
        return sums;
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // console.log(row,column,rowIndex,columnIndex)
        if (columnIndex === 0 || columnIndex === 4 ) {
          //判断区域rowspan数量
          const len = this.classArea(row.regionName);
          const lenName = this.classAreaLen(row.regionName);
          if (rowIndex === lenName) {   //某区域首位岗位
            return {
              rowspan:len,
              colspan:1
            }
          } else return {   //某区域非首位岗位
            rowspan: 0,
            colspan: 0
          };
        }else if(columnIndex === 1){
          //判断区域rowspan数量
          const len = this.classGroup(row.groupName);
          const lenName = this.classGroupLen(row.groupName);
          if (rowIndex === lenName) {   //某区域首位岗位行
            return {
              rowspan:len,
              colspan:1
            }
          } else return {   //某区域非首位岗位行
            rowspan: 0,
            colspan: 0
          };
        }
      },
      getTimShiftInfo(){
        getTimShiftInfo().then(
          response => {
            this.timeShiftList= response.rows;

          }
        );
      },

    }
  }
</script>

<style>
  .device-wrap .el-table td{
    padding: 0;
  }
  .device-wrap .el-table td .cell{
    padding: 0;
  }
  .device-wrap .el-table td:first-child .cell{
    padding-left: 10px;
  }

  .schemeAdd .el-radio:first-child{
    margin-right: 15px;
  }
</style>
<style scoped>

  .device-wrap .device-head{
    border-bottom: 1px solid #ccc;
  }
  .device-wrap .el-table td .status{
    min-height: 36px;
    box-sizing: border-box;
  }
  .device-wrap .el-table td .status{
    background-color: white;
  }
  .device-wrap .el-table td .status.green{
    background-color: green;
  }
  .device-wrap .el-table td .status.red{
    background-color: red;
  }

  .device-wrap .itemStatus{
    padding-left: 40px;
    display: inline-block;
    line-height: 30px;
    position: relative;
    margin-right: 10px;
  }
  .device-wrap .itemStatus::before{
    content: "";
    display: inline-block;
    width: 35px;
    height: 20px;
    position: absolute;
    left: 0;
    top: 5px;
    background-color: green;
  }
  .device-wrap .itemStatus.red::before{
    background-color: red;
  }
</style>
